<template>
  <div class="searchResult">
    <div class="bg" v-show="!showLoading"></div>
    <p class="title">搜索结果:{{ keywords }}</p>
    <div class="songlist">
      <SongList
        :songs="songs"
        :keywords="keywords"
        :showNum="true"
        @play="$emit('play', $event)"
      ></SongList>
      <Loading v-if="showLoading"></Loading>
      <div
        class="moreBtn"
        v-if="!showLoading"
        @click="loadMore"
        ref="moreBtn"
        :style="{
          background: noRes
            ? ''
            : 'linear-gradient(#fcfcfd 50%, rgba(0,0,0,0) 100%)',
        }"
      >
        {{
          noRes
            ? "暂无搜索结果"
            : isAll
            ? "到底了"
            : moreHint
            ? "松开加载更多"
            : "加载更多"
        }}
      </div>
    </div>
  </div>
</template>

<script>
import SongList from "@/components/SongList";
import Loading from "./Loading.vue";
export default {
  name: "SearchResult",
  data() {
    return {
      showLoading: true,
      songs: [],
      offset: 0,
      isAll: false,
      noRes: true,
      moreHint: false,
    };
  },
  props: {
    keywords: {
      type: String,
      default: "",
    },
  },
  mounted() {
    let _this = this;
    let body = document.body;
    let html = document.documentElement;
    body.ontouchstart = function () {
      _this.onTouch = true;
    };
    body.ontouchend = function () {
      _this.onTouch = false;
      body.onscroll();
    };
    body.onscroll = function () {
      let moreBtn = _this.$refs.moreBtn;
      if (!moreBtn) return;
      var lh = parseInt(window.getComputedStyle(moreBtn).lineHeight);
      let st = Math.ceil(body.scrollTop || html.scrollTop);
      let max = body.clientHeight - window.innerHeight;
      let h = max - moreBtn.clientHeight + lh;
      _this.moreHint = false;
      if (st >= h) {
        if (st >= max - lh && !_this.isAll) {
          _this.moreHint = true;
          if (!_this.onTouch) {
            _this.loadMore();
          }
        } else if (!_this.onTouch) {
          setTimeout(() => {
            html.scrollTop ? (html.scrollTop = h) : (body.scrollTop = h);
          }, 0);
        }
      }
    };
  },
  destroyed() {
    let body = document.body;
    body.onscroll = null;
    body.ontouchstart = null;
    body.ontouchend = null;
  },
  created() {
    var arr = JSON.parse(window.localStorage.getItem("historysearch"));
    if (!arr) arr = [];
    arr.unshift(this.keywords);
    arr = Array.from(new Set(arr));
    arr = arr.slice(0, 10);
    window.localStorage.setItem("historysearch", JSON.stringify(arr));
    this.showLoading = true;
    this.$http
      .get("/search", {
        params: {
          keywords: this.keywords,
          limit: 20,
          offset: this.offset,
        },
      })
      .then((d) => {
        // console.log(d);
        this.showLoading = false;
        this.noRes = false;
        var newList = d.data.result.songs;
        if (!newList || newList.length == 0) {
          this.isAll = true;
          return;
        }
        for (var i = 0; i < newList.length; i++) {
          newList[i].song = newList[i];
        }
        this.songs = newList;
      })
      .catch(() => {
        this.noRes = true;
        this.showLoading = false;
      });
  },
  components: {
    SongList,
    Loading,
  },
  methods: {
    loadMore() {
      if (this.noRes || this.isAll) return;
      this.showLoading = true;
      this.offset += 20;
      this.$http
        .get("/search", {
          params: {
            keywords: this.keywords,
            limit: 20,
            offset: this.offset,
          },
        })
        .then((d) => {
          // console.log(d);
          this.showLoading = false;
          this.noRes = false;
          var newList = d.data.result.songs;
          if (!newList || newList.length == 0) {
            this.isAll = true;
            return;
          }
          for (var i = 0; i < newList.length; i++) {
            // 去重
            if (this.songs.some((item) => item.id == newList[i].id)) {
              newList.splice(i, 1);
              i--;
            } else {
              newList[i].song = newList[i];
            }
          }
          this.songs = this.songs.concat(newList);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.searchResult {
  .bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #eee;
    z-index: -100;
  }
  .title {
    padding: 8px 0;
    padding-left: 10px;
    font-size: 12px;
    line-height: 16px;
    color: #666;
    background: #fcfcfd;
  }
  .songlist > :not(.moreBtn) {
    background: #fcfcfd;
  }
  .moreBtn {
    height: 220px;
    line-height: 55px;
    text-align: center;
    color: #999;
  }
}
</style>